<script setup>
</script>
<template>
    <div class="main box clmcenter">
        <img src="@/assets/img/logo.png" class="logo" alt="logo">
        <img src="@/assets/img/back.png" class="btn_goback"
            @click="$router.replace({ path: '/en', query: { from: 'main' } })">
        <div class="container">
            <div class="citem clmstart" @click="$router.replace('/en/map_vr')">
                <img src="@/assets/img/pic_vr.png" class="cpic" />
                <button type="button" class="btn btn_tonext">Virtual Tours</button>
            </div>
            <div class="citem clmstart" @click="$router.replace('/en/map_local')">
                <img src="@/assets/img/pic_local.png" class="cpic" />
                <button type="button" class="btn btn_tonext">Site Visit</button>
            </div>
            <div class="citem clmstart" @click="$router.replace('/en/video')">
                <img src="@/assets/img/pic_video.png" class="cpic" />
                <button type="button" class="btn btn_tonext">Video</button>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.main {
    background: url('@/assets/img/bg2.jpg') no-repeat center center;
    background-size: cover;
    .btn {
        transition: all 0.5s linear;
    }
    .btn:hover {
        transform: scale(1.1);
    }
    .container {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .citem {
            position: relative;
            width: 17.7vw;
            .cpic {
                width: 100%;
                -webkit-animation: float 5s linear infinite;
                animation: float 5s linear infinite;
            }
            @-webkit-keyframes float {
                0%, 100% {
                    transform: translateY(0px);
                }
                50% {
                    transform: translateY(-10px);
                }
            }
            @keyframes float {
                0%, 100% {
                    transform: translateY(0px);
                }
                50% {
                    transform: translateY(-10px);
                }
            }
            .btn_tonext {
                margin-top: 4.0625vw;
                min-width: 8.2vw;
                height: 2.24vw;
                font-size: 0.97vw;
                line-height: 1.2;
                cursor: pointer;
            }
            // .btn_tonext::before {
            //     content: '';
            //     position: absolute;
            //     top: -30%;
            //     left: -15%;
            //     width: 10%;
            //     height: 140%;
            //     background-color: rgba(255, 255, 255, 0.5);
            //     -webkit-transform: rotate(18deg);
            //     transform: rotate(18deg);
            //     box-shadow: 0 0 15px 9px rgba(255, 255, 255, 0.5);
            //     -webkit-animation: blink 3s ease-in 1s infinite;
            //     animation: blink 3s ease-in 1s infinite;
            // }
        }
    }
}
</style>